<template>
  <div class="item-desc">
    <el-card class="sur-card">
      <div class="sur-card-title" slot="header">
        <span>编辑图文详情------------[{{ itemName }}]</span>
        <el-button type="primary" @click="onSaveItemDesc">保存</el-button>
      </div>
      <el-row type="flex" justify="center">
        <el-col span="20">
          <h-editor
            v-if="showEditor"
            @change="onInputChange"
            :initContent="itemDesc.descText"
          ></h-editor>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import HEditor from "@/components/HEditor";
import {
  getItemDesc,
  saveItemDesc,
  updateItemDesc
} from "@/api/admin-api/ItemDescApi";

export default {
  name: "ItemDescEdit",
  components: {
    HEditor
  },
  props: {
    itemId: [],
    itemName: []
  },
  data() {
    return {
      showEditor: false,
      itemDesc: {
        itemId: "",
        id: "",
        descText: ""
      }
    };
  },
  methods: {
    onInputChange(content) {
      this.itemDesc.descText = content;
      console.log(content);
    },
    onSaveItemDesc() {
      this.$loading();
      if (this.itemDesc.id) {
        // 更新
        updateItemDesc(this.itemDesc).then(() => {
          this.$message.success("保存成功");
          this.$loading().close();
          setTimeout(() => {
            this.$router.go(0);
          }, 500);
        });
      } else {
        // 保存
        saveItemDesc(this.itemDesc).then(() => {
          this.$message.success("保存成功");
          this.$loading().close();
          setTimeout(() => {
            this.$router.go(0);
          }, 500);
        });
      }
    },
    loadItemDesc() {
      this.$loading();
      getItemDesc(this.itemId).then(data => {
        if (data) {
          this.itemDesc = data;
        }
        this.showEditor = true;
        this.$loading().close();
      });
    }
  },
  mounted() {
    if (!this.itemId) {
      this.$router.push("/404");
    }
    this.itemDesc.itemId = this.itemId;
    this.loadItemDesc();
    this.$notify.info("建议使用电脑来编辑商品详情哦~");
  }
};
</script>

<style scoped>
.item-desc {
}
.item-desc >>> .w-e-text-container {
  height: 600px !important; /*!important是重点，因为原div是行内样式设置的高度300px*/
}
</style>
